<template>
  <div id="activity-common-layout">
    <el-container class="container-box">
      <el-container v-loading="!isMounted">
        <el-header class="container-header">
          <div class="container-header-title">
            <span class="container-header-activityName" :title="matchInfo.name">
              {{ matchInfo.name }}
            </span>
            <el-tag
              class="container-header-activityTag"
              :type="jianchatime(matchInfo).type"
              effect="dark"
              size="default"
            >
              {{ jianchatime(matchInfo).text2 }}
            </el-tag>
            <!-- 倒计时 -->
            <el-tag class="container-header-activityTime" v-if="!isActivityEnd">
              距{{ n }}: <span>{{ time.d }}</span
              >天 <span>{{ time.h }}</span
              >时 <span>{{ time.m }}</span
              >分 <span>{{ time.s }}</span
              >秒
            </el-tag>
          </div>
          <div class="descriptions-box">
            <el-descriptions title="" :column="2" size="default">
              <template #title></template>
              <el-descriptions-item :span="3" label="比赛时间:">
                {{ TimeYH(matchInfo.activitystarttime) }} -
                {{ TimeYH(matchInfo.activityendtime) }}
              </el-descriptions-item>
              <!-- <el-descriptions-item label="结束时间:">{{ TimeYH(matchInfo.activityendtime) }}</el-descriptions-item> -->
              <el-descriptions-item label="比赛时长:">
                {{
                  matchInfo.duration
                    ? `${(matchInfo.duration / 60).toFixed(1)}小时`
                    : timeDiff(
                        matchInfo.activitystarttime,
                        matchInfo.activityendtime
                      )
                }}
              </el-descriptions-item>
              <el-descriptions-item label="比赛类型:"
                >{{ matchInfo.type === "public" ? "公开" : "非公开" }}
              </el-descriptions-item>
              <el-descriptions-item label="计时方式:">{{
                matchInfo.duration ? "个人计时" : "统一计时"
              }}</el-descriptions-item>
              <el-descriptions-item label="比赛赛制:">{{
                matchInfo.format
              }}</el-descriptions-item>
              <el-descriptions-item
                :span="3"
                label="比赛积分:"
                v-show="matchInfo.integral"
                >{{ matchInfo.integral }}</el-descriptions-item
              >
              <!-- <el-descriptions-item :span=3 label="比赛题目:">
                <template #default>
                  <span class="" v-for="(v, k) in matchQuestionComputed">
                    {{ `${k}题：${v.count} (共${v.score}分)` }}&nbsp;&nbsp;
                  </span>
                </template>
              </el-descriptions-item> -->
            </el-descriptions>
            <div class="container-header-flex">
              <!-- isMounted 默认false 避免闪烁出现按钮 isSignUp && isActivityIn-->
              <el-button
                type="primary"
                size=""
                v-if="isMounted && !isActivityEnd"
                :disabled="!isActivityIn"
                class="btn-tab"
                @click="signUp"
              >
                {{ signUpTitle }}
              </el-button>
              <!-- isMounted && isActivityStart && matchInfo.file -->
              <el-button
                type="primary"
                size=""
                v-if="isMounted && isActivityStart && matchInfo.file"
                class="file-download-btn"
              >
                <a target="_blank" :href="matchInfo.file">
                  <el-icon class="icon">
                    <Download />
                  </el-icon>
                  下发文件下载
                </a>
              </el-button>
            </div>
            <!-- 如果在比赛中则显示按钮，点击跳转比赛题目 -->
          </div>
        </el-header>
        <el-main class="padding0">
          <!-- 中间tabs class="container-content-tabs-box" -->
          <div class="">
            <!-- 报名前 aticleid.isinvitation-->
            <!-- <div v-if="!isJoin && matchInfo.invitation" class="invitation el-tabs__header">
              <div class="invitation-form">
                <el-input size="large" v-model="invitationvalue" style="width: 400px" placeholder="进入该比赛需要激活码，请输入"
                  clearable>
                </el-input>
                &nbsp;
                <el-button size="large" type="primary" @click="invitation"> 确定 </el-button>
              </div>
            </div> -->
            <el-tabs
              v-if="matchInfo.invitation && !isJoin"
              v-model="activeName"
              class="match-tabs"
              type=""
            >
              <!-- 比赛公告 -->
              <el-tab-pane lazy :name="Tabs.MATCHDESCRIPTION.tabName">
                <template #label>
                  <el-icon>
                    <BellFilled />
                  </el-icon>
                  <span>{{ Tabs.MATCHDESCRIPTION.tabLabel }}</span>
                </template>
                <div class="acvitity-desc container-content">
                  <div class="invitation-form">
                    <el-input
                      size="default"
                      v-model="invitationvalue"
                      style="width: 400px"
                      placeholder="进入该比赛需要邀请码，请输入。如无邀请码，请联系老师"
                      clearable
                    >
                    </el-input>
                    &nbsp;
                    <el-button
                      class="margin-top10"
                      size="default"
                      type="primary"
                      @click="invitation"
                    >
                      确定
                    </el-button>
                  </div>
                  <div class="aside-container-box">
                    <div class="aside-card-title">比赛公告</div>
                    <el-divider />
                    <!-- matchInfo.invitation ? isJoin : true -->
                    <div
                      v-if="true"
                      class="editor-content-view"
                      v-html="matchInfo.context"
                    ></div>
                    <div v-else class="aside-card-content">报名比赛可见</div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <el-tabs
              v-else
              v-model="activeName"
              class="match-tabs"
              type=""
              stretch
            >
              <!-- 比赛公告 比赛说明可见权限：aticleid.isinvitation-->
              <el-tab-pane lazy :name="Tabs.MATCHDESCRIPTION.tabName">
                <template #label>
                  <!-- <el-icon>
                      <BellFilled />
                    </el-icon> -->
                  &nbsp;<span>{{ Tabs.MATCHDESCRIPTION.tabLabel }}</span>
                </template>
                <div class="acvitity-desc container-content">
                  <div class="aside-container-box">
                    <div class="aside-card-title">比赛公告</div>
                    <el-divider />
                    <div
                      v-if="matchInfo.isinvitation ? isJoin : true"
                      class="editor-content-view aside-card-content"
                      v-html="matchInfo.context"
                    ></div>
                    <div v-else class="aside-card-content">报名比赛可见</div>
                  </div>
                </div>
              </el-tab-pane>
              <!-- 比赛题目 -->
              <el-tab-pane
                lazy
                v-if="Tabs.MATCHQUESTION.show()"
                :name="Tabs.MATCHQUESTION.tabName"
              >
                <template #label>
                  <!-- <el-icon>
                      <List />
                    </el-icon> -->
                  &nbsp;<span>{{ Tabs.MATCHQUESTION.tabLabel }}</span>
                </template>
                <div class="container-content">
                  <MatchQuestion
                    :activity="matchInfo"
                    :setduration="setduration"
                  >
                  </MatchQuestion>
                </div>
              </el-tab-pane>
              <!-- 比赛中rank -->
              <el-tab-pane
                lazy
                v-if="Tabs.MATCHRANKING.show()"
                :name="Tabs.MATCHRANKING.tabName"
              >
                <template #label>
                  <!-- <el-icon>
                      <TrendCharts />
                    </el-icon> -->
                  &nbsp;<span>{{ Tabs.MATCHRANKING.tabLabel }}</span>
                </template>
                <div class="container-content">
                  <MatchRanking :activity="matchInfo"> </MatchRanking>
                </div>
              </el-tab-pane>
              <!-- 赛后成绩 -->
              <el-tab-pane
                lazy
                v-if="Tabs.MATCHENDRESULT.show()"
                :name="Tabs.MATCHENDRESULT.tabName"
              >
                <template #label>
                  <!-- <el-icon>
                      <TrendCharts />
                    </el-icon> -->
                  &nbsp;<span>{{ Tabs.MATCHENDRESULT.tabLabel }}</span>
                </template>
                <div class="container-content">
                  <MatchEndResult :activity="matchInfo"> </MatchEndResult>
                </div>
              </el-tab-pane>
              <!-- 赛后总结 -->
              <el-tab-pane
                lazy
                v-if="Tabs.MATCHSUMMARIZE.show()"
                :name="Tabs.MATCHSUMMARIZE.tabName"
              >
                <template #label>
                  <!-- <el-icon>
                      <Opportunity />
                    </el-icon> -->
                  &nbsp;<span>{{ Tabs.MATCHSUMMARIZE.tabLabel }}</span>
                </template>
                <div class="container-content">
                  <MatchSummarize :match="matchInfo"> </MatchSummarize>
                </div>
              </el-tab-pane>
              <!-- 答题分析 -->
              <el-tab-pane
                lazy
                v-if="Tabs.MATCHANSWERANALYSIS.show()"
                :name="Tabs.MATCHANSWERANALYSIS.tabName"
              >
                <template #label>
                  <!-- <el-icon>
                      <Histogram />
                    </el-icon> -->
                  &nbsp;<span>{{ Tabs.MATCHANSWERANALYSIS.tabLabel }}</span>
                </template>
                <div class="container-content">
                  <MATCHANSWERANALYSIS :activity="matchInfo">
                  </MATCHANSWERANALYSIS>
                </div>
              </el-tab-pane>
              <!-- AI分析 -->
              <!-- <el-tab-pane lazy v-if="Tabs.AIACTIVITYSUMMARIZE.show()" :name="Tabs.AIACTIVITYSUMMARIZE.tabName">
                  <template #label>
                    <el-icon>
                      <Ticket />
                    </el-icon>
                    &nbsp;<span>{{ Tabs.AIACTIVITYSUMMARIZE.tabLabel }}</span>
                  </template>
                  <div class="container-content">
                    <ActivitySummarizeIndex :data="matchInfo" :activitySummarize :activityUserSummarize  :userId="user?.ID">
                    </ActivitySummarizeIndex>
                  </div>
                </el-tab-pane> -->
            </el-tabs>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, dayjs } from "element-plus";
import {
  computed,
  inject,
  onActivated,
  onBeforeUnmount,
  onDeactivated,
  onMounted,
  reactive,
  ref,
} from "vue";
import { useStore } from "vuex";
import {
  asyncTeamGetActivity,
  asyncchangeactivityuser,
  asyncgetactivityuser,
  asyncselectmatchuserquestion,
} from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { adminTeamId } from "../../../util/data";
import { TimeYH } from "../../../util/time";
import { JCTime, dhms, jianchatime } from "@/util/jianchatime";
import MATCHANSWERANALYSIS from "./matchAnswerAnalysis.vue";
import MatchEndResult from "./matchEndResult.vue";
import MatchQuestion from "./matchQuestion.vue";
import MatchRanking from "./matchRanking.vue";
import MatchSummarize from "./matchSummarize.vue";
// 赛制
enum Format {
  OI = "OI",
  IOI = "IOI",
}

// 报名之后的Tabs
const Tabs: {
  [key: string]: {
    tabLabel: string;
    tabName: string;
    icon: string;
    show: () => boolean;
  };
} = {
  MATCHDESCRIPTION: {
    tabLabel: "公告",
    tabName: "matchDescription",
    icon: "",
    show: function () {
      return true;
    },
  },
  MATCHQUESTION: {
    tabLabel: "题目",
    tabName: "matchQuestion",
    icon: "",
    show: function () {
      return isJoin.value && isActivityStart.value;
    },
  },
  MATCHRANKING: {
    tabLabel: "赛中成绩",
    tabName: "matchInResult",
    icon: "",
    show: function () {
      return isJoin.value && isActivityIn.value && isShowRanking.value;
    },
  },
  MATCHENDRESULT: {
    tabLabel: "赛后成绩",
    tabName: "matchEndResult",
    icon: "",
    show: function () {
      return isJoin.value && isActivityEnd.value;
    },
  },
  MATCHSUMMARIZE: {
    tabLabel: "总结",
    tabName: "matchSummarize",
    icon: "",
    show: function () {
      return isJoin.value && isActivityEnd.value;
    },
  },
  MATCHANSWERANALYSIS: {
    tabLabel: "补题成绩",
    tabName: "matchAnswerAnalysis",
    icon: "",
    show: function () {
      return isJoin.value && isActivityEnd.value;
    },
  },
  AIACTIVITYSUMMARIZE: {
    tabLabel: "AI分析",
    tabName: "AIActivitySummarize",
    icon: "",
    show: function () {
      return (
        (activitySummarize.value || activityUserSummarize.value) &&
        isHGKJteam.value &&
        isJoin.value &&
        isActivityEnd.value
      );
    },
  },
};
const activeName = ref(Tabs.MATCHDESCRIPTION.tabName);

const props = defineProps<{ ID?: number }>();
const store = useStore(Storekey);
const user = computed(() => {
  return store.state.user;
});
const teamId = computed(() => {
  return user.value?.teamid;
});
// isHGKJteam
const isHGKJteam = computed(() => {
  return teamId?.value === adminTeamId;
});
const datenow = computed(() => {
  return store.state.time;
});
const getteam = computed(() => {
  return store.state.team?.rows || [];
});
//
const activitySummarize = computed(() => {
  return getteam.value.some((c) => c?.other?.activitySummarize);
});
const activityUserSummarize = computed(() => {
  return getteam.value.some((c) => c?.other?.activityUserSummarize);
});

const loginfunction = inject<(key: string) => void>("headnavdialogVisible");
const matchInfo = reactive<Studycodemodel.Iactivity>({});
const time = reactive<JCTime>({ isok: false, d: 0, h: 0, s: 0, m: 0 });
const timer = ref(0);
const n = ref("开始");
// 比赛参与者
const activityusers = ref<Studycodemodel.Iactivityuser[]>([]);
const isMounted = ref(false);

function init() {
  getMatcInfo().then((_e) => {
    const s = new Date(matchInfo.activitystarttime || new Date());
    const e = new Date(matchInfo.activityendtime || new Date());
    function countdown() {
      let t;
      if (s.getTime() > datenow.value!) {
        n.value = "开始";
        t = s;
      } else {
        n.value = "结束";
        t = e;
      }
      const time1 = dhms(t, datenow.value!);
      Object.assign(time, time1);
    }
    countdown();
    timer.value = window.setInterval(countdown, 1000);
    isMounted.value = true;
    start();
  });
}
onMounted(() => {
  init();
});
onActivated(() => {
  init();
});
onDeactivated(() => {
  clearInterval(timer.value);
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
});

const matchQuestion = ref<Studycodemodel.Iquestion[]>([]);
const matchQuestionComputed = computed(() => {
  const info = {}; // "选择": { count: 1, score: 20 }
  matchQuestion.value.reduce((ret, e) => {
    const { type, score } = e;
    if (info[type]) {
      info[type].count++;
      info[type].score += score;
    } else {
      info[type] = { count: 1, score };
    }
  }, info);
  return info;
});

async function getMatcInfo() {
  if (typeof props.ID === "number") {
    try {
      // const matchRet = await asyncgetactivity({ ID: props.ID });
      const matchRet = await asyncTeamGetActivity({
        ID: props.ID,
        teamid: teamId.value,
      });
      Object.assign(matchInfo, matchRet);
    } catch (e: any) {
      ElMessage.error(e);
    }
  }
}

async function start() {
  if (typeof props.ID === "number") {
    try {
      // 比赛信息
      // const matchRet = await asyncgetactivity({ ID: props.ID });
      // const matchRet = await asyncTeamGetActivity({ ID: props.ID, teamid: teamId.value });
      // Object.assign(matchInfo, matchRet)

      // 比赛题目
      const { question, activity, userquestion } =
        await asyncselectmatchuserquestion({ ID: props.ID, my: true });
      matchQuestion.value = question || [];

      try {
        // 获取我的参赛信息
        const activityuser = await asyncgetactivityuser({
          activityid: props.ID,
        });
        Object.assign(matchInfo, {
          activityuser: matchInfo.activityuser?.concat([activityuser]),
        });
      } catch (e) {
        console.error("asyncgetactivityuser err=>", e);
      }
      // 获取比赛参与者
      activityusers.value = matchInfo.activityuser || [];
    } catch (e: any) {
      ElMessage.error(e);
    }
  }
}

// endTime - startTime
function timeDiff(a?: Date | string, b?: Date | string) {
  const t = dayjs(b).toDate().getTime() - dayjs(a).toDate().getTime();
  let n: string | number = (t / 60 / 60 / 1000).toFixed(1);
  if (Number(n) === Math.floor(Number(n))) {
    n = Math.floor(Number(n));
  }
  return n + "小时";
}

// 比赛是否开始
const isActivityStart = computed(() => {
  if (matchInfo.activitystarttime) {
    return new Date(matchInfo.activitystarttime).getTime() < datenow.value;
  }
  return false;
});
// 是否在比赛中
const isActivityIn = computed(() => {
  // return true
  if (matchInfo.activitystarttime && matchInfo.activityendtime) {
    return (
      new Date(matchInfo.activitystarttime).getTime() < datenow.value &&
      new Date(matchInfo.activityendtime).getTime() > datenow.value
    );
  }
  return false;
});
// 比赛是否结束
const isActivityEnd = computed(() => {
  if (matchInfo.activityendtime) {
    return new Date(matchInfo.activityendtime).getTime() < datenow.value;
  }
  return false;
});
// 是否已报名 false:可以报名 true:不能报名
const isSignUp = computed(() => {
  // return false
  if (!user.value) return false;
  if (isActivityEnd.value) {
    return true;
  }
  let check = true;
  const findRet = matchInfo?.activityuser?.find(
    (v) => v.userid == user.value?.ID
  );
  if (!findRet) {
    check = false;
  }
  // activityuser中没有 获取比赛参与者查看
  if (activityusers.value.length) {
    const ret = activityusers.value.find((v) => v.userid == user.value?.ID);
    if (!ret) {
      check = false;
    }
  } else if (matchInfo.teamid && teamId.value === matchInfo.teamid) {
    check = true;
  } else {
    check = true;
  }
  return check;
});
// 激活码
const invitationvalue = ref<string>();
const dialogVisible = ref(false);
function invitation() {
  if (invitationvalue.value) {
    const t = matchInfo.invitation?.split(",").includes(invitationvalue.value);
    if (t) {
      localStorage.setItem(
        `${user.value?.ID}-${matchInfo.ID}`,
        invitationvalue.value
      );
      dialogVisible.value = false;
      // 激活码正确 直接报名
      signUp();
      return;
    }
  }
  ElMessage.error("邀请码输入错误");
}

// 老版本进入比赛
/**
 * 公开比赛：是否有验证码
 * 团队比赛：是否可参赛
 */
async function signUp() {
  // if (aticleid.type !== "public") {
  //   ElMessage.error("此比赛不是公开比赛，禁止报名");
  //   return;
  // }
  if (isActivityEnd.value) {
    ElMessage.error("比赛已结束！无法进入");
    return;
  }
  // 非公公开比赛才需要报名
  if (matchInfo.type !== "public" && !isJoin.value) {
    ElMessage.error("暂无参赛权限！无法进入");
    return;
  }
  if (matchInfo.invitation && !user.value?.isAdmin) {
    const tempInvitation =
      localStorage.getItem(`${user.value?.ID}-${matchInfo.ID}`) ||
      invitationvalue.value;
    let check = false;
    if (tempInvitation) {
      check = matchInfo.invitation?.split(",").includes(tempInvitation);
    }
    // admin 不需要判断 admin默认直接进入比赛
    if (!user.value?.isAdmin && !check) {
      return ElMessage.error("邀请码输入错误");
    }
  }
  activeName.value = Tabs.MATCHQUESTION.show()
    ? Tabs.MATCHQUESTION.tabName
    : Tabs.MATCHDESCRIPTION.tabName;
  try {
    if (matchInfo.type !== "public") {
      console.log("此比赛不是公开比赛，禁止报名");
      return;
    }
    // 更新参与者
    await asyncchangeactivityuser({ activityid: props.ID });
    start().then((e) => {
      const n = matchInfo.activityuser?.find(
        (e) => e.userid === user.value?.ID
      );
      if (n) {
        ElMessage.success("报名成功");
        // TODO 需要进行比赛计时
        activeName.value = Tabs.MATCHQUESTION.show()
          ? Tabs.MATCHQUESTION.tabName
          : Tabs.MATCHDESCRIPTION.tabName;
      } else {
        ElMessage.success("取消报名");
      }
    });
  } catch (e: any) {
    ElMessage.error(e);
  }
}

// 比赛公告、题目、排行、成绩是否可见
const isJoin = computed(() => {
  const n = matchInfo.activityuser?.find((e) => e.userid === user.value?.ID);
  if (n) {
    return true;
  }
  let k = false;
  // 比赛成员范围
  if (activityusers.value.length) {
    k = !!activityusers.value.find((e) => {
      return user.value?.ID === e.userid;
    });
    // 教师、管理
    if (user.value?.isAdmin) {
      // 有邀请码的都要展示邀请码
      k = matchInfo.invitation ? false : true;
    }
  }
  // 判断团队id
  else if (matchInfo.teamid && teamId.value === matchInfo.teamid) {
    k = true;
  }

  // 是否区分赛后、赛中
  if (isActivityEnd.value) {
    k = true;
  }
  // 处理异常
  if (teamId.value !== matchInfo.teamid) {
    k = false;
  }

  // 公开比赛
  // if (matchInfo.type === "public") {
  //   k = true
  // }
  // TODO 教师、管理
  if (user.value?.isAdmin) {
    // 有邀请码的都要展示邀请码
    k = matchInfo.invitation ? false : true;
  }
  return k;
});
// 报名比赛 进入比赛
const signUpTitle = computed(() => {
  return isJoin.value ? "进入比赛" : "报名比赛";
});

// 距离比赛结束
const duration = ref<{ activityendtime: Date; activitystarttime: Date }>();

function setduration(data: { activityendtime: Date; activitystarttime: Date }) {
  duration.value = data;
}

// 展示rank
const isShowRanking = computed(() => {
  return !!(matchInfo.isranking && matchInfo.format === Format.IOI);
});
</script>

<style scoped>
.container-box {
  padding: var(--container-margin) 0 0;
  margin: var(--container-margin) 0rem 0 0rem;
  /* 外边距 */
  --container-margin: 6px;
  --container-header-height: 23vh;
  --container-bg-color: #fff;

  --descriptions-bg-color: #fafafa;
}

.container-header {
  height: var(--container-header-height);
  min-height: var(--container-header-height);
  background: var(--container-bg-color);
  width: 100%;
  padding: var(--container-margin);

  box-shadow: var(--container-box-shadow);
  border-radius: var(--container-border-radius);
}

.container-header-title {
  display: flex;
  align-items: center;
  margin-bottom: var(--container-margin);
  padding: 0 var(--container-margin);
}

.container-header-activityName {
  /* width: 90%; */
  font-weight: bolder;
  font-size: 1.5rem;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container-header-activityTag {
  margin-left: 10px;
  /* display: inline-block; */
}

.container-header-flex {
  display: flex;
  margin-top: 4px;
}

.btn-tab {
  font-weight: bolder;
  width: 150px;
  border-radius: 8px;
}

.container-header-activityTime {
  margin-left: 20px;
  text-align: center;
  /* color: var(--sass-color-blue); */
  /* font-size: 12px; */
}

.descriptions-box {
  padding: 3px 6px;
  margin-left: 0;
  font-size: 14px;
  background: var(--descriptions-bg-color);
  box-shadow: var(--container-box-shadow);
  border-radius: var(--container-border-radius);
}

/* 激活码 */
.invitation,
.tabs-box {
  height: 80%;
  display: flex;
  flex-wrap: wrap;
}

.invitation {
  flex-direction: column;
  justify-content: center;
  height: 100px;
}

.invitation-desc {
  margin-bottom: 10px;
}

.invitation-form {
}

/* 下发文件下载 */
.file-download-btn,
.file-download-btn a {
  border-radius: 8px;
  color: #fff;
}

/* .file-download-btn [class*=el-icon]+span {
    margin-left: 2px;
    font-weight: bolder;
} */
.file-download-btn:hover a {
  color: #fff;
}

.download-file {
}

.container-content-tabs-box {
}

/* 报名后的tabs */
.tabs-box {
  justify-content: space-between;
  align-items: center;
}

.container-content {
  background: var(--container-bg-color);
  margin-top: var(--container-margin);
  padding: var(--container-margin);
  min-width: 80%;
  border-radius: none;
  box-shadow: none;
  /* TODO */
  /* height: calc(100vh - 64px - var(--container-margin)* 5 - var(--container-header-height)) */
}

.acvitity-desc {
  button {
    font-weight: bolder;
    width: 160px;
    border-radius: 8px;
  }
}

/* 右侧 */
.aside-container-box {
  padding: var(--container-margin);
}

.aside-card-title {
  font-weight: bolder;
  font-size: 1.5rem;
}

.aside-card-content {
  /* padding-top: var(--container-margin); */
}

/* 状态 */
.info,
.primary,
.danger,
.success {
  width: 44px;
  height: 24px;
  color: #fff;
  display: inline-block;
  text-align: justify;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  border-radius: 5px;
}

/* 赛事结束-已结束 */
.info {
  background-color: rgba(236, 128, 141, 1);
}

/* 立即报名-报名中 */
.primary {
  background: rgb(112, 182, 3);
  /* transform: translateY(-3px); */
}

/* 即将开赛-未开始 */
.danger {
  background: rgb(170, 170, 170);
  /* transform: translateY(-3px); */
}

/* 进入比赛-比赛中 */
.success {
  background: var(--color-cheng);
  /* transform: translateY(-3px); */
}
</style>

<style>
/* 自定义.el-descriptions 样式 */
#app.ojSass #activity-common-layout .descriptions-box .el-descriptions {
  /* width: 100%; */
}

#app.ojSass #activity-common-layout .el-descriptions__header {
  margin: 0;
}

#app.ojSass #activity-common-layout .el-descriptions__body {
  border-left: 2px solid var(--sass-color-blue);
  background: var(--descriptions-bg-color) !important;
  padding: 0 6px;
}

#app.ojSass
  #activity-common-layout
  .el-descriptions__body
  .el-descriptions__cell {
  padding-bottom: 4px;
}

/* 自定义tabs样式 */
#app.ojSass #activity-common-layout .el-tabs__header {
  background: var(--container-bg-color);
  border: none;
  margin: 0;

  background: var(--container-bg-color);
  margin-top: var(--container-margin);
  padding: 1px var(--container-margin);
  box-shadow: var(--container-box-shadow);
  /* border-radius: var(--container-border-radius); */
}

#app.ojSass #activity-common-layout .el-tabs__nav-wrap:after {
  background-color: transparent;
  height: 0;
}

#app.ojSass #activity-common-layout .el-tabs__item {
  height: 50px;
  line-height: 50px;
}
</style>
